<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" style="width: 400px; height: 300px;"></canvas>
</body>

<script id="vertex-shader" type="nojs">
    attribute vec4 p_position;
    varying vec4 v_color;

    void main() {
        gl_Position = p_position;
        v_color = gl_Position * 0.5 + 0.5;
    }
</script>

<script id="flagment-shader" type="nojs">
    precision mediump float;
    varying vec4 v_color;

    void main() {
        gl_FragColor = v_color;
    }
</script>

<script>
    function main() {
        var canvas = document.querySelector("#canvas");
        canvas.width = 400;
        canvas.height = 300;

        const gl = document.getElementById('canvas').getContext('webgl');
        if (!gl) {
            console.log('Failed to get the rendering context for WebGL');
            return;
        }

        const vertexShader = createShader(gl, gl.VERTEX_SHADER, document.getElementById('vertex-shader').text);
        const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, document.getElementById('flagment-shader').text);

        const shaderProgram = initShaderProgram(gl, vertexShader, fragmentShader);

        const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'p_position');

        // attribute 需要从缓冲区中获取数据
        const positionBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        debugger
        // 通过bufferData将数据传入缓冲区
        const positions = [
            0, 0,
            0, 0.5,
            0.7, 0,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

        // 设置背景颜色蓝色
        gl.clearColor(0, 0, 0, 255);
        // gl.clearColor(0, 1, 1, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.useProgram(shaderProgram);

        gl.enableVertexAttribArray(positionAttributeLocation); // 开启attribute变量

        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        // 告诉attribute变量从缓冲区中获取数据
        const size = 2; // 每次迭代运行提取两个单位数据
        const type = gl.FLOAT; // 每个单位的数据类型是32位浮点型
        const normalize = false; // 不需要归一化数据
        const stride = 0; // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type)）
        var offset = 0; // 从缓冲区何处开始获取数据
        gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

        const primitiveType = gl.TRIANGLES;
        var offset = 0;
        var count = 3;
        gl.drawArrays(primitiveType, offset, count);


    }

    function createShader(gl, type, source) {
        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);
        var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) {
            return shader;
        }
        gl.deleteShader(shader);
    }

    function initShaderProgram(gl, vertexShader, fragmentShader) {
        const shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader)
        gl.attachShader(shaderProgram, fragmentShader)
        gl.linkProgram(shaderProgram)
        var success = gl.getProgramParameter(shaderProgram, gl.LINK_STATUS);
        if (success) {
            return shaderProgram;
        }
        gl.deleteProgram(shaderProgram);
    }

    main();


</script>

</html>